<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chinese_music</title>

    <!-- 主页 -->
    <link rel="stylesheet" href="music链接文件/CSS/主页.css">

    <!-- 隐藏框样式 -->
    <link rel="stylesheet" href="music链接文件/CSS/隐藏框样式.css">

    <!-- 滚动条样式 -->
    <link rel="stylesheet" href="music链接文件/CSS/滚动条样式.css">

    <!--图标样式-->
    <link rel="stylesheet" href="../图标文件/font-awesome.min.css">
</head>

<body>
    <button id="container"><div></div></button>
    <!--隐藏框-->
    <div id="frame">
        <div id="links">
            <li class="song-item frame-song-item">
                <div class="song-info">
                    <div id="Icon_fa-play" class="fa fa-play" onclick="faPlayFunc()"></div>
                    <div id="NextOne" class="" onclick="checkAudioPlaying()"></div>
                    <div id="disc-image" class="fa disc-image"></div>
                    <div id="songName" class="song-Name">暂无记录</div>
                    <div id="singer" class="singer">暂无记录</div>
                    
                    <input type="button" id="AutoPlay" class="AutoPlay" value="自动播放" onclick="AutoPlayIsSelected()">
                    <input type="button" id="RandomPlay" class="RandomPlay" value="随机播放" onclick="RandomPlayIsSelected()">
                    <input type="button" id="CirclePlay" class="CirclePlay" value="单曲循环" onclick="CirclePlayIsSelected()">
                    
                    <div id="songPlayer" class="frame-song-player">
                        <audio>
                            <source
                                src=""
                                type="audio/mp3" >
                        </audio>
                    </div>
                </div>
            </li>
        </div>
    </div>

    <!-- 存放音频的源地址：https://websiteforwyh.github.io/music/AudioFile/audio.html -->
    <ul class="song-list" id="song-list">
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">迷失幻境</div>
                <div class="song-artist">王忻辰</div>
                <div class="song-player">
                    <audio controls>
                        <source
                            src="https://websiteforwyh.github.io/music/AudioFile/%E8%BF%B7%E5%A4%B1%E5%B9%BB%E5%A2%83-%E7%8E%8B%E5%BF%BB%E8%BE%B0.mp3"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">林中鸟</div>
                <div class="song-artist">葛林</div>
                <div class="song-player">
                    <audio controls>
                        <source
                            src="https://websiteforwyh.github.io/music/AudioFile/%E6%9E%97%E4%B8%AD%E9%B8%9F-%E8%91%9B%E6%9E%97.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">书里说</div>
                <div class="song-artist">鱼儿七</div>
                <div class="song-player">
                    <audio controls>
                        <source
                            src="https://websiteforwyh.github.io/music/AudioFile/%E4%B9%A6%E9%87%8C%E8%AF%B4-%E9%B1%BC%E5%84%BF%E4%B8%83.mp3"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">雨过天不晴</div>
                <div class="song-artist">柯柯柯啊</div>
                <div class="song-player">
                    <audio controls>
                        <source
                            src="https://websiteforwyh.github.io/music/AudioFile/%E9%9B%A8%E8%BF%87%E5%A4%A9%E4%B8%8D%E6%99%B4-%E6%9F%AF%E6%9F%AF%E6%9F%AF%E5%95%8A.mp3"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">半生</div>
                <div class="song-artist">张磊</div>
                <div class="song-player">
                    <audio controls>
                        <source
                            src="https://websiteforwyh.github.io/music/AudioFile/%E5%8D%8A%E7%94%9F-%E5%BC%A0%E7%A3%8A.mp3"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">自愈</div>
                <div class="song-artist">穆哲熙</div>
                <div class="song-player">
                    <audio controls>
                        <source
                            src="https://websiteforwyh.github.io/music/AudioFile/%E8%87%AA%E6%84%88-%E7%A9%86%E5%93%B2%E7%86%99.mp3"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Attention</div>
                <div class="song-artist">Charlie Puth</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/Attention-CharliePuth.mp3"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">New Ting</div>
                <div class="song-artist">Marec E.Bassy</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/NewTing-MarcE.Bassy.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Come Back For You</div>
                <div class="song-artist">Matluck/Elephante</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/ComeBackForYou-Matluck-Elephante.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Dear Friend</div>
                <div class="song-artist">Adib Sin</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/DearFriend-AdibSin.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Die Hard</div>
                <div class="song-artist">Dirtydisco</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/DieHard-Dirtydisco.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">I Really Like You</div>
                <div class="song-artist">Anthem Lights</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/IReallyLikeYou-AnthemLights.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Little Do You Know</div>
                <div class="song-artist">BEAUZ</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/LittleDoYouKnow-BEAUZ.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Little Lies</div>
                <div class="song-artist">Dave Barnes</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/LittleLies-DaveBarnes.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Lonely</div>
                <div class="song-artist">Nana</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/Lonely-Nana.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Lose Control</div>
                <div class="song-artist">Hedley</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/LoseControl-Hedley.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Love It When You Hurt Me</div>
                <div class="song-artist">TheFatRat/Anjulie</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/LoveItWhenYouHurtMe-TheFatRat-Anjulie.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Lucky Strike</div>
                <div class="song-artist">Maroon 5</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/LuckyStrike-Maroon5.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">New Soul</div>
                <div class="song-artist">Yael Naim</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/NewSoul-YaelNaim.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Not Angry</div>
                <div class="song-artist">Chris James</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/NotAngry-ChrisJames.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Numb</div>
                <div class="song-artist">Khalid</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/Numb-Khalid.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Paradise</div>
                <div class="song-artist">George Ezra</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/Paradise-GeorgeEzra.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Peter Pan Was Right</div>
                <div class="song-artist">Anson Seabra</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/PeterPanWasRight-AnsonSeabra.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Rain drops</div>
                <div class="song-artist">Leony</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/Raindrops-Leony.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Sharks</div>
                <div class="song-artist">Imagine Dragons</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/Sharks-ImagineDragons.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Teeth</div>
                <div class="song-artist">5 Seconds of Summer</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/Teeth-5SecondsofSummer.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">WhiteLie</div>
                <div class="song-artist">Jhameel</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/WhiteLie-Jhameel.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">落单恋人</div>
                <div class="song-artist">杨清纯/零一九五零</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E8%90%BD%E5%8D%95%E6%81%8B%E4%BA%BA-%E6%9D%A8%E6%B8%85%E7%BA%AF.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">难断</div>
                <div class="song-artist">树泽</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E9%9A%BE%E6%96%AD-%E6%A0%91%E6%B3%BD.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">少不更事</div>
                <div class="song-artist">王富贵</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E5%B0%91%E4%B8%8D%E6%9B%B4%E4%BA%8B-%E7%8E%8B%E5%AF%8C%E8%B4%B5.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">时间沦陷</div>
                <div class="song-artist">想吃小板栗</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E6%97%B6%E9%97%B4%E6%B2%A6%E9%99%B7-%E6%83%B3%E5%90%83%E5%B0%8F%E6%9D%BF%E6%A0%97.m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">收敛</div>
                <div class="song-artist">小乐哥（王维乐）</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E6%94%B6%E6%95%9B-%E5%B0%8F%E4%B9%90%E5%93%A5(%E7%8E%8B%E7%BB%B4%E4%B9%90).m4a"
                            type="audio/mp3">
                    </audio>
                </div>
            </div>
        </li>
    </ul>

    <!-- 屏幕大小兼容性设置 -->
    <script src="music链接文件/JS/屏幕大小兼容性设置.js"></script>

    <!-- 隐藏框显示隐藏 -->
    <script src="music链接文件/JS/隐藏框显示隐藏.js"></script>

    <!-- 播放功能 -->
    <script src="music链接文件/JS/播放功能.js"></script>
</body>

</html>